<template>
  <div>
    <a-menu
      theme="dark"
      :default-selected-keys="['1']"
      :open-keys.sync="openKeys"
      mode="inline"
      @click="handleClick"
    >
      <a-sub-menu
        key="sub1"
        @titleClick="titleClick"
        v-if="item.children && item.children.length > 0"
      >
        <span slot="title">
          <router-link :to="item.link || item.path">{{
            item.title
          }}</router-link>
        </span>
        <template v-for="(c, i) of item.children">
          <MenuItem :key="i" :item="c" />
        </template>
      </a-sub-menu>
      <a-menu-item v-else>
        <router-link :to="item.link || item.path">{{ item.title }}</router-link>
      </a-menu-item>
    </a-menu>
  </div>
</template>
<script>
export default {
  name: "MenuItem",
  props: {
    item: Object,
  },
  data() {
    return {
      current: ["mail"],
      openKeys: ["sub1"],
    };
  },
  watch: {
    openKeys(val) {
      console.log("openKeys", val);
    },
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },
    titleClick(e) {
      console.log("titleClick", e);
    },
  },
};
</script>
<style>
</style>